<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    BTM机器管理
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>设备中心</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <!-- <el-button type="default" @click="toAdd" class="iconfont icon-add-s" size='small'>添加设备</el-button> -->
            <el-select v-model="params.countryId" placeholder="分布国家" @focus="getCountry" clearable class="handle-select mr10" size='small'>
                <el-option label="所有国家" value=""></el-option>
                <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item.chineseName" :value="type_item.id"></el-option>
            </el-select>
            <el-select v-model="params.status" placeholder="运行状态" class="handle-select mr10" size="small">
                <el-option label="全部状态" value=""></el-option>
                <el-option label="正常" value="0"></el-option>
                <el-option label="停止" value="1"></el-option>
                <el-option label="故障" value="2"></el-option>
                <el-option label="维护中" value="3"></el-option>
                <!-- <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option> -->
            </el-select>
            <el-select v-model='params.online' placeholder="是否在线" class="handle-select mr10" size="small">
              <el-option label="所有线上状态" value=""></el-option>
              <el-option label="不在线" value="0"></el-option>
              <el-option label="在线" value="1"></el-option>
            </el-select>
            <el-input v-model="params.code" clearable placeholder="筛选：设备编号" class="handle-input mr10" size="small"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="getList"  size="small">搜索</el-button>
            <!-- <el-button type="default" icon="el-icon-upload" class="handle-btn handle-del mr10" @click="expendToExcel" size="small">导出到excel</el-button> -->
        </div>
        <div class="handle-box">
          <div class="item-container">
            <ul>
                <li class="item-container-inline" v-for="(item,index) in deviceCenter" :key='index'>
                    <div class="table-top">
                        <div class="device-name">
                            <span class="itemInfo runMessage" :class="{'colorGreenBg':item.status==0,'colorRedBg':item.status==1,'colorYellowBg1':item.status==2,'colorYellowBg':item.status==3}">{{item.status==0?'运行正常':item.status==1?'停止运行':item.status==2?'故障异常':'维修中'}}</span>
                            <span class="itemInfo deviceName">{{item.name}}</span>
                            <span class="itemInfo deviceStau" :class="{colorGreen:item.online==1,colorRed:item.online!=0}"><i class="iconfont icon-yuandianzhong"></i>{{item.online==0?'不在线':'在线'}}</span>
                        </div>
                        <div class="device-operation" style="display:table-cell;width:500px;">
                            <el-button type='danger' size='small' @click='deleteDialog(item.id)'>删除设备</el-button>
                            <el-button type="default"  @click="getData(item)"  size="small">设置备注</el-button>
                            <el-button type="success"  size="small" @click="getDetail(item)">查看设备</el-button>
                            <el-button type="primary"  size="small" @click="editBTM(item.id)">编辑设备</el-button>
                            <el-button type="default"  size="small" @click="addLogs(item)">添加日志</el-button>
                            <!-- <el-button type="danger"  size="small" @click="systemLogs(item.id)">系统日志</el-button> -->
                        </div>

                    </div>
                    <!-- 查看设备dialog -->
                    <el-dialog title="查看设备信息" :visible.sync="getDevicerDetail"  width="30%">
                      <detail @cancel='cancel' :btmData="btmData"></detail>
                    </el-dialog>

                    <div class="table-container">
                          <div  class="table-container-item device-id">
                              <label class="item-name text-left">设备编号</label>
                              <label class="item-value">{{item.code}}</label>
                          </div>
                          <div  class="table-container-item device-item-detail-list">
                              <div class="device-item-detail">
                                  <label class="item-name">存款箱</label>
                                  <label class="item-value" ><i class="iconfont" ></i>{{item.depositBox}}</label>
                              </div>
                              <div class="device-item-detail">
                                  <label class="item-name">取款箱</label>
                                  <label class="item-value"><i class="iconfont" ></i>{{item.withdrawBox}}</label>
                              </div>
                          </div>
                          <div class="table-container-item device-item-detail-list" style="width:350px;">
                               <div class="device-item-detail  address-time" style="width:60%;">
                                  <label class="item-name text-left">投放地址</label>
                                  <a style="color:#000;cursor:pointer;" :title="item.address" href="javascript:;"><label class="item-value text-left item-inline">{{item.country['chineseName']}}</label></a>
                              </div>
                                 <div class="device-item-detail address-time "  style="width:40%;">
                                  <label class="item-name text-left">投放时间</label>
                                  <label class="item-value text-left" >{{item.createTime|moment}}</label>
                              </div>
                          </div>
                          <div  class="table-container-item remark-content">
                              <label class="item-name text-left">备注信息</label>
                                <a style="color:#000;cursor:pointer;" :title="'备注信息内容'" href="javascript:;">
                                  <label class="item-value text-left item-inline" >{{item.remark||'备注信息内容'}}</label>
                                </a>
                         </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="pagination">
            <el-pagination
                  :page-size="pageSize"
                  @current-change ="handleCurrentChange"
                  layout="prev, pager, next"
                  :total="all_page">
            </el-pagination>
        </div>

</div>
<el-dialog title='提示' :visible.sync='delLog'>
  <span>您确定删除设备吗？</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click='cancel'>取消</el-button>
    <el-button type='success' @click='deleteBtm'>确定</el-button>
  </span>
</el-dialog>
  <el-dialog :title="'设置备注'" :visible.sync='beizhu' width="30%">
    <el-input v-model="beizhuText" placeholder="请输入备注"  size="small"></el-input>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel" size="small">取 消</el-button>
      <el-button type="primary" @click="editBeiz" size="small">确 定</el-button>
    </span>
  </el-dialog>
<edit v-if="showEdit" @cancel='cancel' :id='btmId'></edit>


<el-dialog :visible.sync='logDialog'
    title='新增日志'>
    <el-tabs v-model='tabsIndex' @tab-click='typeSelect'>
      <el-tab-pane label='取款箱' name='qk'>
        <el-form>
          <el-form-item>
            <div class='total'>
              <div>
                总金额：{{logParams.withdrawBox}}
              </div>
              <div>
                小额取款箱
                <p>数量：{{logParams.boxes[0].num}}</p>
                <p>金额：{{logParams.boxes[0].amount}}</p>
              </div>
              <div>
                大额取款箱
                <p>数量：{{logParams.boxes[1].num}}</p>
                <p>金额：{{logParams.boxes[1].amount}}</p>
              </div>

            </div>
          </el-form-item>
          <el-form-item label='添加总金额'>
            {{totalAmount}}
          </el-form-item>
          <!-- <el-form-item label='金额'>
            <el-input placeholder="请输入金额" v-model='logParams.amount'></el-input>
          </el-form-item> -->
          <el-form-item label='小额取款箱'>
            <el-input placeholder="请输入补钞数量" v-model='logParams.boxData[0].num'></el-input>
          </el-form-item>
          <el-form-item label='大额取款箱'>
            <el-input placeholder="请输入补钞数量" v-model='logParams.boxData[1].num'></el-input>
          </el-form-item>
          <el-form-item label='操作人员'>
            <el-input placeholder="请输入姓名" v-model="loginName" disabled></el-input>
          </el-form-item>
          <!-- <el-form-item label='类型'>
              <el-radio-group v-model="logParams.type">
                  <el-radio-button label="0" value='0' size='small'>小额取款箱</el-radio-button>
                  <el-radio-button label="1" value='1' size='small'>大额取款箱</el-radio-button>
                  <el-radio-button label="2" value='2' size='small'>存款箱</el-radio-button>
              </el-radio-group>
          </el-form-item> -->
        </el-form>
      </el-tab-pane>
      <el-tab-pane label='存款箱' name='ck'>
        <el-form>
          <el-form-item>
            <div class='total'>
              <span>金额：{{logParams.boxes[2]&&logParams.boxes[2].amount}}</span>
              <span>数量：{{logParams.boxes[2]&&logParams.boxes[2].num}}</span>
              <!-- <span>数量：{{logParams.boxes[2]&&logParams.boxes[2].num}}</span> -->
            </div>
          </el-form-item>
          <el-form-item label='金额'>
            <el-input placeholder="请输入金额" disabled v-model='logParams.boxes[2].amount'></el-input>
          </el-form-item>
          <el-form-item label='张数：'>
            <el-input placeholder="张数" disabled v-model='logParams.boxes[2].num'></el-input>
          </el-form-item>
          <el-form-item label='操作人员'>
            <el-input placeholder="请输入姓名" v-model="loginName" disabled></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
        <!-- <el-form>
            <el-form-item label='数量：'>
                <el-input placeholder="输入数量" v-model='logParams.amount'></el-input>
            </el-form-item>
            <el-form-item label='小额取款箱'>
                <el-input placeholder="数量" v-model='logParams.boxData[0].num'></el-input>
            </el-form-item>
            <el-form-item label='大额取款箱'>
                <el-input placeholder="数量" v-model='logParams.boxData[1].num'></el-input>
            </el-form-item>
            <el-form-item label='存款箱'>
                <el-input placeholder="数量" v-model='logParams.boxData[2].num'></el-input>
            </el-form-item>
            <el-form-item label='备注'>
                <el-input type='textarea' v-model='logParams.remark' placeholder="备注"></el-input>
            </el-form-item> -->
            <!-- <el-form-item label='类型'>
                <el-radio-group v-model="logParams.type">
                    <el-radio-button label="0" value='0' size='small'>小额取款箱</el-radio-button>
                    <el-radio-button label="1" value='1' size='small'>大额取款箱</el-radio-button>
                    <el-radio-button label="2" value='2' size='small'>存款箱</el-radio-button>
                </el-radio-group>
            </el-form-item> -->
        <!-- </el-form> -->
         <div slot="footer" class="dialog-footer">
            <el-button type="default" @click="closeEdit">关闭</el-button>
            <el-button type="success" @click="addLog" :disabled='ckNot'>保存</el-button>
        </div>
    </el-dialog>

    <el-dialog :visible.sync="systemShow"
    title='系统日志'
    >
    <span v-if='!(systemData.length)'>暂无日志</span>
    <el-table v-if="systemData.length" :data='systemData' border  style="width: 100%">
        <el-table-column prop='id' label='编号'></el-table-column>
        <el-table-column prop='createTime' label='创建时间'></el-table-column>
        <el-table-column prop='content' label='内容'></el-table-column>
        <el-table-column prop='type ' label='类型'>
          <template slot-scope="scope">
            {{scope.row.type==0?'正常':scope.row.type==1?'停止':scope.row.type==2?'故障':'维护中'}}
          </template>
        </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
        <el-button type="default" @click="closeEdit">确定</el-button>
    </div>
    </el-dialog>
<loading v-if="loading" :tip='tip'></loading>
</div>

</template>
<script>
import * as rpConfig from "../../../../rpConfig/constant";
import * as Login from '@/service/login';
import { HttpReq } from "../../../service/server";
import { api,apiGet,apiPatch,apiDelete} from '@/api/index';
import loading from '@/components/common/loading.vue';
import edit from '@/components/common/edit.vue';
import detail from '@/components/common/BTMDetail.vue';
var Server = new HttpReq();
export default {
  data() {
    return {
      systemShow:false,
      tabsIndex:'',
      logDialog:false,
      delId:'',
      logParams:{
          boxes:[{amount:0,num:0},{amount:0,num:0},{amount:0,num:0}],
          amount :'',
          boxData :[{
              num : 0,
              denomination : 0,
              amount : 0,
              type: 0
          },
          {
              num : 0,
              denomination : 0,
              amount : 0,
              type: 1
          },
          {
              num : 0,
              denomination : 0,
              amount : 0,
              type: 2
          }],
          btm :"",
          remark :'',
          type:'取款箱'
      },
      params:{
        page:0,
        size:3,
        countryId:'',
        status:'',
        online:'',
      },
      ckNot:false,
      systemData:{},
      tabsIndex:'qk',
      delLog:false,
      tip:'',
      getDevicerDetail:false,
      activeRow:{},
      beizhuText:'',
      beizhu:false,
      btmId:'',
      btmData:{},
      // closeDetail:false,
      showEdit:false,
      loading:false,
      uploadURI: rpConfig.API_URI + "/Helpapi/uploadImg",
      activityId: "",
      orderBy: "",
      select_word: "",
      userCenter: [],
      typeCenter: [],
      cur_page: 1,
      all_page: 6,
      pageSize:3,
      authArr: {},
      denominationBig:'',
      denominationSmall:'',
      loginName:'',
      deviceCenter: [

      ]
    };
  },
  created() {
    //  this.getData()
    //  this.getType()
  },
  components:{
    loading,
    edit,
    detail
  },
  computed: {
    userAuth() {
      return "test";
    },
    totalAmount(){
      this.logParams.amount=this.denominationBig*this.logParams.boxData[1].num+this.denominationSmall*this.logParams.boxData[0].num;
      return this.denominationBig*this.logParams.boxData[1].num+this.denominationSmall*this.logParams.boxData[0].num;
    }
  },
  methods: {
    addSystemLog(){

    },

    systemLogs(row){
      this.loading=true;
      this.tip='获取系统日志';
      apiGet.drive.systemLog({}).then(res=>{
        ////console.log(res)
        this.systemData=res.content;
        this.loading=false;
        this.systemShow=true;
      })

    },
    typeSelect(){
      // this.logParams.amount='';
      if(this.tabsIndex=='qk'){
        this.logParams.amount=0;
        this.logParams.boxData[0].num=0;
        this.logParams.boxData[1].num=0;
        this.logParams.type='取款箱';
      }else{
        this.logParams.amount=0;
        this.logParams.type='存款箱';
      }
    },
    closeDetail(){
      this.getDevicerDetail = false;
    },
    editBeiz(){
      var self=this;
      this.loading=true;
      this.beizhu=false;
      var params={
        remark:this.beizhuText,
      }
      apiPatch.drive.getDriveList(this.activeRow.id+'/remark',params).then((res)=>{
        self.activeRow.remark=self.beizhuText;
        ////console.log(res);
        this.loading=false;
        self.beizhuText="";
      })
    },
    deleteDialog(id){
      this.delId=id;
      this.delLog=true;
    },
    deleteBtm(){
      this.loading=true;
      this.tip='删除中';
      apiDelete.drive.getDriveList(this.delId,{}).then(res=>{
        this.loading=false;
        this.delLog=false;
        this.getList();
        this.$message({
          message:'已删除',
          type:'success'
        })
      })
    },
    editBTM(id){//编辑设备modal
      this.btmId=id;
      this.showEdit=true;
    },
    cancel(edit){//所有模态框关闭的方法
      this.showEdit=false;
      this.getDevicerDetail=false;
      this.beizhu=false;
      this.delLog=false;
      if(edit=='edit'){
        this.getList();
      }
    },
    getDetail(detail){
      this.loading=true;
      this.tip='加载设备信息';
      // ////console.log(detail)
      apiGet.drive.getDriveList({},true,detail.id).then(res=>{
        ////console.log(res);
        this.loading=false;
        this.getDevicerDetail=true;
        this.btmData=res;
      })
    },
    toAdd(){
      this.$router.push({path:'/addDevice'})
    },
    handleAvatarSuccess(res) {
      if (res.code != 200) {
        this.$message.error(res.msg);
      } else {
        this.unewdata.showavatar = res.data.url;
        this.unewdata.avatar = res.data.saveUrl;
      }
    },
    getData(row) {
      let self = this;
      this.beizhu=true;
      this.activeRow=row;
      // Server._POST(rpConfig.API_URI + "/system.Index/getMList", {}, function(
      //   res
      // ) {
      //   self.userCenter = res.data;
      // });
    },
    getType() {
      let self = this;
      Server._POST(rpConfig.API_URI + "/system.Index/getAllAuth", {}, function(
        response
      ) {
        self.typeCenter = response.data;
        for (let index of self.typeCenter) {
          if (self.unewdata.auth.includes(index.auth_id)) {
            self.$set(self.authArr, index.auth_id, true);
          } else {
            self.$set(self.authArr, index.auth_id, false);
          }
        }
      });
    },
    clearInfo() {
      this.unewdata = {
        mid: 0,
        name: "",
        pwd: "",
        repwd: "",
        remark: "",
        auth: []
      };
    },
    addNewAccount() {
      this.editMinfo = true;
    },
    addLogs(row){
      console.log(row);
      // this.tabsIndex=='qk';
      this.typeSelect();
      this.depositBox=row.depositBox;
      this.logParams.btm=row.id;
      this.logParams.boxes=row.boxes;
      this.logParams.withdrawBox=row.withdrawBox;
      this.loading=false;
      //小额存储箱
      this.denominationSmall=row.country.denomination[0];
      this.logParams.boxData[0].denomination=row.country.denomination[0];
      //大额取款箱
      this.denominationBig=row.country.denomination[1];
      this.logParams.boxData[1].denomination=row.country.denomination[1];
      // 登录名称
      this.loginName=Login.getLogin().loginName;
      this.logDialog=true;
    },
    addLog(){
        this.loading=true;
        this.tip='添加日志';
        if(this.tabsIndex=='qk'){
            this.logParams.boxData[0].amount=this.logParams.boxData[0].num*this.logParams.boxData[0].denomination;
            this.logParams.boxData[1].amount=this.logParams.boxData[1].num*this.logParams.boxData[1].denomination;
            this.logParams.amount=this.logParams.boxData[0].amount + this.logParams.boxData[1].amount;
        } else {
            this.logParams.boxData[2]=this.logParams.boxes[2];
            this.logParams.boxData[2].amount=this.logParams.boxData[2].amount*-1;
            this.logParams.boxData[2].num=this.logParams.boxData[2].num*-1;
            this.logParams.amount=this.logParams.boxData[2].amount;
        }
        api.drive.btmLog(this.logParams).then(res=>{
          this.loading=false;
          this.logDialog=false;
          ////console.log(res);
          if(res.status==200){
            this.$message.success('添加成功');
            this.getList();
             this.logParams={
                boxes:[{},{},{}],
                amount :'',
                boxData :[{
                    num :'',
                    type:'0'
                },
                {
                    num :'',
                    type:'1'
                },
                {
                    num :'',
                    type:'2'
                }],
                btm :"",
                remark :'',
                type:'取款箱'
            }
          }else{
            this.$message.warning(res.message);
            this.getList();
          }

        }).catch(err=>{
          this.loading=false;
        })
    },
    closeEdit() {
      this.clearInfo();
      this.systemShow=false;
      this.editMinfo = false;
      this.logDialog=false;
      this.logParams={
          boxes:[{},{},{}],
          amount :'',
          boxData :[{
              num :'',
              type:'0'
          },
          {
              num :'',
              type:'1'
          },
          {
              num :'',
              type:'2'
          }],
          btm :"",
          remark :'',
          type:'取款箱'
      }
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      // ////console.log(val)
      this.params.page=val-1;
      this.getList();
      // this.getData();
    },
    updateMinfo() {
      let self = this;
      self.unewdata.auth = [];
      for (var key in self.authArr) {
        if (self.authArr[key]) {
          self.unewdata.auth.push(key);
        }
      }
      Server._POST(
        rpConfig.API_URI + "/system.Index/createAccount",
        self.unewdata,
        function(data) {
          self.$message.success(data.msg);
          setTimeout(() => {
            window.location.reload();
          }, 2000);
        }
      );
    },

    editUInfo(uitem) {
      this.unewdata["mid"] = uitem.id;
      this.unewdata["name"] = uitem.name;
      this.unewdata["showavatar"] = uitem.avatar;
      this.unewdata["remark"] = uitem.remark;
      for (let index of uitem.authId) {
        this.$set(this.authArr, index, true);
      }
      this.editMinfo = true;
    },
    iceUinfo(uitem) {
      let self = this;
      this.$confirm(
        uitem.state == 1 ? "确认冻结该用户吗？" : "确认取消冻结该用户吗？"
      )
        .then(() => {
          Server._POST(
            rpConfig.API_URI + "/system.Index/iceAccount",
            { mid: uitem.id, type: uitem.state == 1 ? 0 : 1 },
            function(data) {
              self.$message.success(data.msg);
              setTimeout(() => {
                window.location.reload();
              }, 2000);
            }
          );
        })
        .catch(() => {});
    },
    getList(){
      this.tip="获取机器列表";
      this.loading=true;
      apiGet.drive.getDriveList(this.params).then((msg)=>{
        // ////console.log(msg);
        this.deviceCenter=msg.content;
        this.all_page=msg.totalElements;
        this.loading=false;
      })
    },
     getCountry(page=0){
      var params={
        page:page,
        size:10,
      }
      apiGet.country.getCountry(params).then(res=>{
        ////console.log(res)
        this.typeCenter=res.content;
        // for(var i=0;i<4;i++){
        //   this.country.push(res.content)
        // }
      })
    }
  },
  mounted () {
    this.getList();
  },
  watch: {
    'logParams.amount'(){
      if(this.logParams.type=='存款箱'){
        if(Number(this.logParams.amount)>this.depositBox){
          this.ckNot=true;
        }else{
          this.ckNot=false;
        }
      }else{
        this.ckNot=false;
      }
    }
  }
};
</script>

<style scoped>
@import url("../../../../static/css/activity-list.css");
.itemInfo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.runMessage {
  color: #fff;
  height: 25px;
  line-height: 25px;
  border-radius: 12.5px;
  padding: 0 15px;
}
.deviceName {
  font-weight: bolder;
}
.colorGreen {
  color: #3ec27e;
}
.colorRed {
  color: #ec5555;
}
.colorYellow {
  color: #f6d452;
}
.colorGreenBg {
  background: #3ec27e;
}
.colorRedBg {
  background: #ec5555;
}

.colorYellowBg {
  background: #f6d452;
}
.colorYellowBg1{
  background: #f6d452;
}
.total{
  padding: 15px 18px;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.total::after{
  content: '';
  display:block;
  clear: both;
}
.total>span{
  margin-right: 100px;
}
.total>div{
  float: left;
  width: 30%;
}
.table-top {
  display: table;
  width: 100%;
  background: #ecf4fc;
  padding: 10px 20px;
  box-sizing: border-box;
}
.table-container {
  display: table;
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
}
.device-name {
  display: table;
}
.device-item-detail {
  display: inline-block;
  width: 33.333%;
  text-align: center;
  vertical-align: middle;
}
.device-item-detail.address-time {
  width: 50%;
  padding-left: 10px;
  box-sizing: border-box;
}

.device-item-detail-list {
  width: 250px;
  font-size: 0;
}
.device-item-detail {
  font-size: 14px;
}

.item-container li {
  border: 1px solid #eee;
}

.table-container-item.device-id {
  width: 180px;
}

.table-container-item {
  display: table-cell;
  border-right: 1px solid #ccc;
  vertical-align: top;
}

.item-name {
  display: block;
  text-align: center;
  color: #999;
  margin-bottom: 5px;
}
.text-left {
  text-align: left;
}

.item-value {
  display: block;
}

.remark-content {
  border-right: 0;
  padding-left: 10px;
}
.item-inline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
